<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号黑名单管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/libs/layui-v2.11.2/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        .layui-layer-dialog .layui-layer-content{color:#444 !important;}
        
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #e6e6e6;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .header {
            text-align: center;
            margin: 30px 0;
            width: 100%;
        }
        
        .header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            font-size: 1.2rem;
            color: #a0a0c0;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            max-width: 1400px;
            width: 100%;
        }
        
        .card {
            background: rgba(30, 30, 46, 0.8);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            width: 100%;
            max-width: 500px;
        }
        
        .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            color: #4facfe;
            font-size: 1.5rem;
        }
        
        .card-title i {
            margin-right: 12px;
            background: rgba(79, 172, 254, 0.15);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-group {
            margin-bottom: 22px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #b8c2cc;
        }
        
        input {
            width: 100%;
            padding: 14px 16px;
            border-radius: 10px;
            border: 2px solid rgba(79, 172, 254, 0.3);
            background: rgba(20, 20, 36, 0.7);
            color: #fff;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        
        input:focus {
            border-color: #4facfe;
            outline: none;
            box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3);
        }
        
        .error-message {
            color: #ff6b6b;
            font-size: 0.9rem;
            margin-top: 8px;
            display: none;
        }
        
        button {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 14px 25px;
            font-size: 1.1rem;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            width: 100%;
            margin-top: 10px;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 15px rgba(79, 172, 254, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button:disabled {
            background: #4a5568;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .records {
            width: 100%;
        }
        
        .records-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .records-list {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .record-item {
            background: rgba(26, 32, 50, 0.6);
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 4px solid #ff6b6b;
            transition: transform 0.2s ease;
        }
        
        .record-item:hover {
            transform: translateX(5px);
            background: rgba(26, 32, 50, 0.8);
        }
        
        .phone-number {
            font-weight: 600;
            font-size: 1.1rem;
            color: #4facfe;
        }
        
        .record-details {
            text-align: right;
            font-size: 0.9rem;
            color: #a0a0c0;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-top: 5px;
        }
        
        .status-added {
            background: rgba(255, 107, 107, 0.2);
            color: #ff6b6b;
        }
        
        .status-removed {
            background: rgba(76, 209, 96, 0.2);
            color: #4cd160;
        }
        
        .search-box {
            position: relative;
            margin-bottom: 20px;
        }
        
        .search-box input {
            padding-left: 40px;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #4facfe;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #a0a0c0;
            font-size: 0.9rem;
            width: 100%;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .counter {
            display: flex;
            justify-content: space-around;
            margin: 25px 0;
            text-align: center;
        }
        
        .counter-item {
            background: rgba(20, 20, 36, 0.7);
            padding: 15px;
            border-radius: 12px;
            flex: 1;
            margin: 0 10px;
        }
        
        .counter-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: #00f2fe;
            margin: 10px 0;
        }
        
        .counter-label {
            color: #b8c2cc;
            font-size: 0.95rem;
        }
        
        @media (max-width: 900px) {
            .container {
                flex-direction: column;
                align-items: center;
            }
            
            .card {
                max-width: 100%;
            }
            
            .counter {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        /* 滚动条样式 */
        .records-list::-webkit-scrollbar {
            width: 8px;
        }
        
        .records-list::-webkit-scrollbar-track {
            background: rgba(20, 20, 36, 0.3);
            border-radius: 4px;
        }
        
        .records-list::-webkit-scrollbar-thumb {
            background: #4facfe;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-shield-alt"></i> 手机号黑名单管理系统</h1>
        <p>管理系统中的骚扰电话、诈骗电话等不良号码，维护通信环境安全</p>
    </div>
    
    <div class="container">
        <div class="card">
            <div class="card-title">
                <i class="fas fa-ban"></i>
                <h3>添加黑名单号码</h3>
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="text" id="phone" placeholder="请输入11位手机号码" maxlength="11">
                <div class="error-message" id="phone-error">请输入有效的11位手机号码</div>
            </div>
            
            <div class="form-group">
                <label for="reason">原因（可选）</label>
                <input type="text" id="reason" placeholder="例如：骚扰电话、诈骗电话等">
            </div>
            
            <button id="add-btn">
                <i class="fas fa-plus-circle"></i> 添加到黑名单
            </button>

        </div>
        
<!--        <div class="card">-->
<!--            <div class="card-title">-->
<!--                <i class="fas fa-history"></i>-->
<!--                <h2>最近操作记录</h2>-->
<!--            </div>-->
<!--            -->
<!--            <div class="search-box">-->
<!--                <i class="fas fa-search"></i>-->
<!--                <input type="text" placeholder="搜索手机号或操作人...">-->
<!--            </div>-->
<!--            -->
<!--            <div class="records-list">-->
<!--                <div class="record-item">-->
<!--                    <div>-->
<!--                        <div class="phone-number">138****5678</div>-->
<!--                        <div>骚扰营销电话</div>-->
<!--                    </div>-->
<!--                    <div class="record-details">-->
<!--                        <div>管理员: 张伟</div>-->
<!--                        <div>2023-10-15 14:30</div>-->
<!--                        <div class="status-badge status-added">已添加</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->

<!--            </div>-->
<!--        </div>-->
    </div>
    
    <div class="footer">
        <p>© 2025 通信安全管理系统 | 黑名单操作需谨慎，所有操作将被记录并审核</p>

    </div>
    <script src="/static/libs/layui-v2.11.2/layui/layui.js"></script>

    <script>
        layui.use(['layer'],function (){
            var layer = layui.layer,$ = layui.$;
            var loading = false;

            $('#add-btn').on('click',function (){
                if(loading){
                    layer.msg('抱歉,请勿重复点击')
                    return ;
                }
                loading = true;
                var phone = $('#phone').val().trim();
                var phoneError = $('#phone-error');
                if (!validatePhone(phone)) {
                    phoneError.show();
                    return;
                }
                $.ajax({
                    type:'POST',
                    url:'/api/baiying.black/addBlackPhone',
                    data:{
                        phone:phone,
                        // uuid:sessionStorage.getItem('FINGERPRINT2'),
                        reason:$('#reason').val()
                    },
                    success:function(res){
                        layer.alert(res.msg);
                    },
                    complete:function(){
                        loading = false;
                    }

                })
            })

            $('#phone').on('input', function() {
                const phone = $('#phone').val().trim();
                var phoneError = $('#phone-error');

                if (phone === '') {
                    phoneError.hide();
                    $('#add-btn').attr('disabled',true);
                    return;
                }

                if (validatePhone(phone)) {
                    phoneError.hide();
                    $('#add-btn').attr('disabled',false);
                } else {
                    phoneError.show();
                    $('#add-btn').attr('disabled',true);
                }
            });



            function validatePhone(phone) {
                const regex = /^1[3-9]\d{9}$/;
                return regex.test(phone);
            }

        })

    </script>
</body>
</html>